<template>
  <div style="pointer-events: all;position: absolute; right: 27px; bottom: 93px;" :style="{bottom: bottom}">

    <a-popover title="更换地图样式">
      <template #content>

        <div id="map-styles">
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.normal ?? false"
              @click="setStyle('normal')"><span>标准</span><span class="input-text">dark</span></div>
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.dark ?? false"
              @click="setStyle('dark')"><span>幻影黑</span><span class="input-text">dark</span></div>
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.fresh ?? false"
              @click="setStyle('fresh')"><span>草色青</span><span class="input-text">fresh</span></div>
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.grey ?? false"
              @click="setStyle('grey')"><span>雅士灰</span><span class="input-text">grey</span></div>
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.blue ?? false"
              @click="setStyle('blue')"><span>靛青蓝</span><span class="input-text">blue</span></div>
          <div class="input-item"><input type="radio" name="mapStyle" :checked="mapStyle.darkblue ?? false"
              @click="setStyle('darkblue')"><span>极夜蓝</span><span class="input-text">darkblue</span></div>
        </div>
      </template>
      <a-button type="link" style="color: rgb(124,150,255);">风格</a-button>
    </a-popover>
  </div>
</template>
<script setup>
import { defineProps, watch, ref } from 'vue'
 
const props = defineProps({
    catMap: Object,
    bottom: {
      type: String,
      default: '93px'
    }
})

watch(()=>props.catMap,(newValue)=>{
	setTimeout(() => {
    getStyle()
  }, 500);
})


const mapStyle = ref({
  normal: false, dark: false, fresh: false, grey: false, blue: false, darkblue: false,
});

const getStyle = () => {
  if (localStorage.styleName) {
    props.catMap.setMapStyle(localStorage.styleName);
    let mapStyleType = localStorage.styleName.replace('amap://styles/', '')
    mapStyle.value[mapStyleType] = true
  }
};

const setStyle = (val) => {
  var styleName = "amap://styles/" + val;
  localStorage.styleName = styleName
  props.catMap.setMapStyle(styleName);
};

</script>
